<template>
  <div class="info-wrap">
    <Title title="上刊价格" style="font-size:16px; margin:10px 0 16px 0">
      <div  class="update-time"><img :src="timeIcon" alt="">最近更新时间：<span class="text">{{ format(modelData.additionalKey.priceUpdateTime, 'YYYY/MM/DD HH:mm') }}</span></div>
    </Title>
    <el-form
      ref="formRef"
      :model="formData"
      :rules="journalRules"
      :label-width="isWxVideo ? '160px' : labelWidth"
      :label-position="showMobilePage ? 'left' : 'right'"
      class="lineHeight32">
      <template v-if="isJournalPlatform">
        <template v-if="isRedBook">
          <div v-for="item in redBook" :key="item.keyword">
            <levelTitle :element="{name: item.name, options: {titleLevel: 2}}" class="mb12"/>
            <el-row :class="{'response-create-row': !dialog, 'flex-wrap': dialog}">
              <el-col v-for="innerItem in redBookFields" :span="rowSpan" :key="innerItem.name" class="responsive-col-lg-8">
                <el-form-item :label="innerItem.name" :prop="`${item.keyword}_${innerItem.keyword}`">
                  <el-input
                    v-model="formData.additionalKey[item.keyword][innerItem.keyword]"
                    class="width240"
                    placeholder="请输入金额"
                    oninput="if(value>999999999)value=999999999;if(value<0)value=0;"
                    type="text"
                    size="small"
                    @input="numberInputChange($event, item.keyword, innerItem.keyword)"
                    @mousewheel.native.prevent
                  >
                    <span slot="suffix" class="suffix">元</span>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </template>
        <template v-else>
          <el-row :class="{'response-create-row': !dialog, 'flex-wrap': dialog}">
            <el-col v-for="item in getConfig()" :span="rowSpan" :key="item.keyword" :class="{'label-collapse-global': item.labelCollapse}" class="responsive-col-lg-8">
              <el-form-item v-if="!kuaiShou" :label="item.name" :prop="item.keyword">
                <el-input
                  v-if="item.type === 'string'"
                  v-model="formData.additionalKey.articlesPrice[item.keyword]"
                  class="width240"
                  placeholder="请输入"
                  type="text"
                  maxlength="50"
                  size="small"
                  @mousewheel.native.prevent
                />
                <el-input
                  v-else
                  v-model="formData.additionalKey.articlesPrice[item.keyword]"
                  class="width240"
                  placeholder="请输入金额"
                  oninput="if(value>999999999)value=999999999;if(value<0)value=0;"
                  type="text"
                  size="small"
                  @input="numberInputChange($event, 'articlesPrice', item.keyword)"
                  @mousewheel.native.prevent
                >
                  <span slot="suffix" class="suffix">元</span>
                </el-input>
              </el-form-item>
              <el-form-item v-else :label="item.name" :prop="item.keyword">
                <el-input
                  v-model="formData.additionalKey[item.keyword]"
                  class="width240"
                  placeholder="请输入金额"
                  oninput="if(value>999999999)value=999999999;if(value<0)value=0;"
                  type="text"
                  size="small"
                  @input="numberInputChange($event, '', item.keyword)"
                  @mousewheel.native.prevent
                >
                  <span slot="suffix" class="suffix">元</span>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </template>
      </template>
      <el-row :class="{'response-create-row': !dialog, 'flex-wrap': dialog}">
        <!-- 价格信息动态字段 -->
        <el-col v-for="(item) in formData.morePriceInfo.dynamicKey" :key="`${item.name}_${item.id}`" :span="rowSpan" class="responsive-col-lg-8">
          <el-form-item :prop="`${item.name}_${item.id}`" class="dynamicKey-label">
            <el-tooltip slot="label" :content="item.name" placement="top" effect="dark">
              <div class="item ellipsisOne">
                {{ item.name }}
              </div>
            </el-tooltip>
            <dynamicKey :item="item"/>
          </el-form-item>
        </el-col>
        <!-- 上刊价格动态字段 -->
        <el-col v-for="(item) in formData.journalKey.dynamicKey" :key="`${item.name}_${item.id}`" :span="rowSpan" class="responsive-col-lg-8">
          <el-form-item :prop="`${item.name}_${item.id}`" class="dynamicKey-label">
            <el-tooltip slot="label" :content="item.name" placement="top" effect="dark">
              <div class="item ellipsisOne">
                {{ item.name }}
              </div>
            </el-tooltip>
            <dynamicKey :item="item"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import SelectWithUserLoad from '@/components/Common/selectWithUserLoad';
import mixins from './mixins';
import timeIcon from '@/assets/cacheTime.png';
import { format } from '@/filters/date';
import { getJournalFields } from '@/views/resource/create/resourceData';

export default {
  components: {
    SelectWithUserLoad
  },
  mixins: [mixins],
  model: {
    prop: 'modelData',
    event: 'changeValue'
  },
  props: {
    modelData: {
      type: Object,
      default: () => ({})
    },
    rowSpan: {
      type: Number,
      default: 12
    },
    isSigned: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      timeIcon,
      redBook: [
        { name: '本月报备价(即本月平台价格)', keyword: 'monthReportPrice' },
        { name: '本月非报备价', keyword: 'monthNotReportPrice' },
        { name: '次月报备价(即次月平台价格)', keyword: 'nextMonthReportPrice', required: true },
        { name: '次月非报备价', keyword: 'nextMonthNotReportPrice' }
      ],
      redBookFields: [
        { name: '图文', keyword: 'imageTextPrice' },
        { name: '视频', keyword: 'videoPrice' }
      ],
      kuaiShouFields: [
        { name: '短视频报价-不含平台费', keyword: 'shortVideoPrice', labelCollapse: true }
      ]
    };
  },
  computed: {
    journalRules() {
      const validateType = (msg, item) => {
        return (rule, value, callback) => {
          if (item || item === 0 || item === false) {
            callback();
          } else {
            callback(new Error(msg));
          }
        };
      };
      const rules = {};
      if (!this.isSigned) { // 未签约账号上刊价格不校验必填
        return rules;
      }
      if (this.isRedBook) {
        this.redBook.filter(i => i.required).forEach(j => {
          this.redBookFields.forEach(k => {
            rules[`${j.keyword}_${k.keyword}`] = [{ required: true, trigger: 'blur', validator: validateType(`请输入${k.name}`, this.formData.additionalKey[j.keyword][k.keyword]) }];
          });
        });
      } else {
        this.getConfig().filter(i => i.required).forEach(j => {
          rules[`${j.keyword}`] = [{ required: true, trigger: 'blur', validator: validateType(`请输入${j.name}`, this.formData.additionalKey.articlesPrice[j.keyword]) }];
        });
      }
      if (this.kuaiShou) {
        rules['shortVideoPrice'] = [{ required: true, trigger: 'blur', validator: validateType('请输入短视频报价-不含平台费', this.formData.additionalKey.shortVideoPrice) }];
      }
      return this.isJournalPlatform ? { ...rules, ...this.formRules } : this.formRules;
    },
    isWxVideo() {
      return this.modelData.platformTypeName === '微信视频号';
    }
  },
  methods: {
    format,
    getConfig() {
      const platformTypeName = this.modelData.platformTypeName;
      if (platformTypeName === '快手') {
        return this.kuaiShouFields;
      } else {
        return getJournalFields(platformTypeName);
      }
    },
    // 限制只能输入正整数或0
    numberInputChange(text, parentKey, key) {
      const val = text.replace(/[^\d.]|\./g, '') || null;
      if (!parentKey) {
        if (this.formData.additionalKey[key]) this.formData.additionalKey[key] = val;
        return;
      }
      if (this.formData.additionalKey[parentKey][key]) this.formData.additionalKey[parentKey][key] = val;
    }
  }
};
</script>
<style scoped lang="scss">
.width240 {
  width: 240px;
}
.update-time {
  display: flex;
  align-items: center;
  background: #FAFAFC;
  padding: 6px 8px;
  font-size: 12px;
  margin-left: 8px;
  border-radius: 4px;
  color: #999999;
  img {
    width: 14px;
    height: 14px;
    margin-right: 4px;
  }
  .text {
    color: #5F77C3;
    font-size: 14px;
    font-weight: bold;
  }
}
</style>
